<template>
    <el-container>
        
        <el-header style="margin-bottom: 100px;">
            <!-- <div>
                <el-input v-model="ServerIp" placeholder="请输入服务IP"></el-input>
                <el-button @click="Test(ServerIp)">切换设备</el-button>
            </div> -->
        </el-header>
        <el-main>
            <div >
            <component v-for="(item,index) in MasterList" :is="Computer" :key="index" :info="item.ip" ref="cpt"  :fatherParam="item"></component>
            </div>
        </el-main>

    </el-container>
</template>

<script>
import { masters } from '../../api/autopay';
import computer from "./computer";

export default {
    name: 'ApiDetail',
    data(){
        return { 
            SocketSuc:false,
            InputMsg:"",
            SckErrshow : false,
            MasterList:[],
            ServerIp : 'ws://' + window.location.host + '/v1/websockit/screen',
            Nosignal:"/img/noSignal.gif",
            Imgurl:"",
            Computer:"computer",

            // socket: new WebSocket('ws://' + window.location.host + '/v1/websockit/get')
        }
    },
    mounted:function () {
        console.log(this);
        // this.Test()
        if (!document.hidden){
            setInterval(this.GetMaster, 5000);
            // setInterval(this.Send, 1000);
        }else{
            console.log("页面被隐藏了");
            this.close;
        }

         //定时发送日志请求
    },//mounted
    destroyed: function() {
    　　　　//页面销毁时关闭长连接
        // this.websocketclose();
        // this.close();
        // this.Imgsocket.onclose =  this.close
    },
    components: {
        computer: computer,
    },
    methods: {
        GetMaster(){
            var that = this;
            masters().then(res => {
                let {code,msg,data} = res;
                if (code == 200){
                    that.MasterList = data;
                }else{
                }
            }).catch(
                function(error) {
                    that.$message.error("获取Master接口请求失败:\n"+error);
            })   
        },
        Test(item){
            var that = this;
            console.log("连接"+item.ip);
            // that.Imgsocket = new WebSocket(that.ServerIp);
            // that.Imgsocket = new WebSocket('ws://'+item.ip+':9000/v1/websockit/screen');
            // console.log("socketInfo",that.socket);

            // that.Imgsocket.onopen = that.open
            // that.Imgsocket.onerror = that.error
            
            // that.Imgsocket.onmessage = that.getImg

            // that.Imgsocket.onclose = that.websocketclose;
            
            var Imgsocket='socket'+item.id

            that.Imgsocket = new WebSocket('ws://'+item.ip+':9000/v1/websockit/screen');
            // 监听socket连接
            console.log("socketInfo",that.Imgsocket);

            that.Imgsocket.onopen = that.open
            // 监听socket错误信息
            that.Imgsocket.onerror = that.error
            // 监听socket消息
            // this.socket.send = this.send
            
            that.Imgsocket.onmessage = that.getImg

            that.Imgsocket.onclose = that.websocketclose;
            setInterval(that.Send, 1000);

        },
        open: function () {
            this.SocketSuc = true;
            console.log("socket连接成功")
            // this.Send();
            this.$notify({
                title: 'socket连接成功',
                message: 'socket连接成功'
            });

        },
        error: function () {
            this.$notify({
                title: 'socket异常',
                message: '连接错误',
                type: 'warning'
            });
        },
        getImg: function (msg) {
            if (msg.data.length < 10) {
                this.Imgurl = "/img/noSignal.gif"
                return 
            }else{
                this.Imgurl  = "data:image/jpeg;base64,"+msg.data.replace(/\"/g, "");
            }
            
        },
        Send() {
            var that = this;
            if (that.SocketSuc){
                that.Imgsocket.send("img");
            }else{
                if (!that.SckErrshow ){
                    that.$notify({
                        title: 'socket异常',
                        message: 'socket未连接',
                        type: 'warning'
                    });
                    that.SckErrshow = true;
                }
                that.Imgurl = "/img/noSignal.gif"
                
            }
        },
        close: function () {
            this.Imgurl = "/img/noSignal.gif"
            this.SocketSuc = false;
            console.log("关闭socket");
            this.$notify({
                title: 'socket异常',
                message: 'socket已经关闭',
                type: 'warning'
            });
        },
        cache(){
          console.log('Cache Cleared');
        },
        alert(){
          alert('Clicked on alert icon');
        },
        websocketclose(e){  //关闭
            this.Imgurl = "/img/noSignal.gif"
            this.SocketSuc = false;
            this.$notify.error({
                title: 'socket异常',
                message: 'socket断开连接'+e,
            });
        },
        
    }
}
</script>

<style >
html {
    overflow: hidden;
}

body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    /*background: gray;*/
}

.showimg {
    /*background: white;*/
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
    /*position: absolute;*/
    /*max-width: 1000px;*/
    /*max-height: 500px;
    min-height: 300px;*/
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    bottom: 3em;
    overflow: auto;
}
#cpt {
    /*background:blue;*/
    margin: 0;
    margin-top: 10px;
    /*padding: 0.5em 0.5em 0.5em 0.5em;*/
    /*position: absolute;*/
    /*position:relative;*/
    /*left:134px; top:130px;*/
    height: 500px;
    width: 630px;
    overflow: auto;
}


#cpt img{ 
    border: black solid 1px;
    width:100%;         /* ... */
    height:100%;        /* ... */
    display:block;  /* ... */
}

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
